<!DOCTYPE html>
<html lang="en">
<head>
    {% comment %} 用于声明static文件夹 调用其中的静态资源 {% endcomment %}
    {% load static %}
    <meta charset="UTF-8">
    {% comment %} title变量赋值 {% endcomment %}
    <title>{{ title }}</title>
    {% comment %} 调用css样式表 {% endcomment %}
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    {% comment %} 导入layui框架 {% endcomment %}
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
    <script src="{% static 'layui/layui.js' %}"></script>
</head>
<body>
    <div class="header">
        <div class="headerLayout">
            <div class="headerCon">
                {% comment %} 母婴商城log图片 {% endcomment %}
                <h1 class="mallLogo">
                    <a href="{% url 'index1:index1' %}" title="母婴商城">
                        <img src="{% static 'img/logo.png' %}" alt="图片加载失败">
                    </a>
                </h1>
                
                {% comment %} 搜索表单设计 {% endcomment %}
                <div class="mallSearch">
                    {% comment %} action为表单提交的url地址应为商品列表页，method设置请求方式为get {% endcomment %}
                    <form action="{% url 'commodity:commodity' %}" method="get">
                        <input type="text" name="n" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入你想要的商品">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">
                            <i class="layui-icon layui-icon-search"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {% comment %} 定义一个classContent变量，用于控制选择样式 {% endcomment %}
    <div class="content content-nav-base {{ classContent }}">
        <div class="main-nav">
            <div class="inner-cont0">
                <div class="inner-cont1 w1200">
                    <div class="inner-cont2">
                        <a href="{% url 'index1:index1' %}" {% if classContent == '' %} class="active" {% endif %}>
                            首页
                        </a>
                        <a href="{% url 'commodity:commodity' %}" {% if classContent == 'commodity' %} class="active" {% endif %}>
                            所有商品
                        </a>>
                        <a href="{% url 'shopper:shopcart' %}" {% if classContent == 'shopcart' %} class="active" {% endif %}>
                            购物车
                        </a>
                        <a href="{% url 'shopper:shopper' %}" {% if classContent == 'shopper' %} class="active" {% endif %}>
                            个人中心
                        </a>
                    </div>
                </div>
            </div>
        </div>
    {% comment %} 编写其他文件html调用接口 {% endcomment %}
        {% block content %}
        {% endblock content %}
    </div>
    {% block footer %}
    {% endblock footer %}
    <script type="text/javascript">
        {% block script %}
        {% endblock script %}
    </script>
</body>
</html>

{% comment %} http://127.0.0.1:8000/index1 {% endcomment %}